<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
          <meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
          <title>Beer Me</title>
          <link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
          <style type="text/css">
          body, img { margin: 0; padding:0; border: 0; }
		  #map { width: 100%; height: 100%; z-index:1; }
		  #map_canvas { height: 100% }
          </style>
          <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
          <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
          <script type="text/javascript">
       // Wait for PhoneGap to load
          //
          function onLoad() {
              document.addEventListener("deviceready", onDeviceReady, false);
          }

          // PhoneGap is ready
          //
          function onDeviceReady() {
        	  document.getElementById('loading').innerHTML = "Loading...";
              navigator.geolocation.getCurrentPosition(onSuccess, onError,{ enableHighAccuracy: true });
          }

          // onSuccess Geolocation
          //
          function onSuccess(position) {
        	  var keyApi = "ABQIAAAAKgQd4DOhwm0ABCIasRkNmhQjE9-vhPTCeHUVmsyTRrZa6-Te5hTILsnm7GQaJRumpQsT_jUTlulzmw";
              //var element = document.getElementById('map');              
              var coords = position.coords;
              var currentPos = 
            	  'Latitude: '   + coords.latitude  +
            	  'Longitude: '  + coords.longitude +
              	  'Timestamp: '  + new Date(position.timestamp);
              document.getElementById('loading').innerHTML = currentPos;
              var myLatlng = new google.maps.LatLng(coords.latitude,coords.longitude);
              var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
              // Call for static google maps data - make sure you use your own Google Maps API key!
              //var url = "http://maps.google.com/maps/api/staticmap?center=" + coords.latitude + "," + coords.longitude + "&zoom=13&size=320x480&maptype=roadmap&key="+ keyApi +"&sensor=true";
              //element.setAttribute('src',url);
          }

          // onError Callback receives a PositionError object
          //
          function onError(error) {
        	  document.getElementById('loading').innerHTML = 'code: '   + error.code  +' message: ' + error.message;              
          }                
          </script>
     </head>
     <body onload="onLoad();">
     	  <a href="index.html">Example 1</a>	
     	  <div id="loading"></div>
     	  <div id="map_canvas" style="width: 100%; height: 100%"></div>
          <!-- <img id="map" /> -->           
     </body>
</html>